<!-- 个人中心 -->
<template>
	<view class="container">
		<view style="margin-top: 200rpx;display: flex;justify-content: center;">
			<image class="auto-login-img logo login-img" src="https://d-duomi.bigchun.com/images/logo.jpg"></image>
		</view>
		<view class="name">店商帮惠选欢迎您</view>

		<view style="display: flex;justify-content: center;align-items: center;">
			<view>
				<button class="denglu" v-if="!protocol" @click="clickagree()">微信用户一键登录</button>
				<button class="denglu" v-else @click="thirdLogin('wechat')">微信用户一键登录</button>
			</view>
		</view>
		<view class="title" @click="toLogin">选择手机号登录</view>
		<!-- 协议 -->
		<view class=" u-flex u-row-center agreement-box">
			<u-checkbox v-model="protocol" shape="circle" active-color="#e9c83ce8">
				<view class="agreement-text u-flex u-col-center">
					选中登录代表您已同意
					<view class="tcp-text u-flex u-col-center">
						<view @tap.stop="$Router.push({ path: '/pages/public/richtext', query: { id: 0 } })">《用户服务协议》
						</view>
					</view>
				</view>
			</u-checkbox>
		</view>
		<u-popup closeable v-model="bindmobille" v-if="bindmobille" mode="center" @close="close" @open="open"
			width="612rpx">
			<view class="notice-modal">
				<image class="auto-login-img login-img" src="https://d-duomi.bigchun.com/images/logo.jpg"></image>
				<text class="title">店商帮惠选欢迎您</text>
				<button class="seckill-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键绑定手机号</button>
			</view>
		</u-popup>
		<u-modal :value="isweishenhe" :show-confirm-button="true" @confirm="confirmAudit" :confirm-color="'#FFFFFF'"
			:confirm-style="confirmStyle" :confirm-text="'我知道了'" :title="' '">
			<view class="slot-content">
				<view class="audit_img">
					<image class="audit_img_top" src="@/static/images/5c8352de0bcc21.png"></image>
				</view>
				<view class="audit_title">入驻信息审核中</view>
				<view class="audit_sub_title">请耐心等待工作人员审核</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import wechat from '@/shopro/wechat/wechat';
	export default {
		components: {

		},
		data() {
			return {
				protocol: false,
				bindmobille: false,
				isweishenhe: false,
				tokens: '',
				confirmStyle: {
					'width': '69%',
					'margin': '40rpx auto',
					'background': '#D9D9D9 linear-gradient(90deg, #e9c83ce8 0%, #FF6E6D 100%)',
					'border-radius': '60rpx',
					'flex': 'inherit'
				},
			};
		},
		computed: {

		},
		onLoad() {
			// uni.login({
			//         success: (res) => {
			//             if (res.code) {         //微信登录成功 已拿到code
			//                conosole.log('11',code)
			//             } else {
			//                 console.log('登录失败！' + res.errMsg)
			//             }
			//         }
			//     })
		},
		methods: {
			...mapActions(['getUserInfo', 'showAuthModal']),
			confirmAudit() {
				this.isweishenhe = false;
			},
			open() {
				// console.log('open');
			},
			close() {
				this.bindmobille = false
				// console.log('close');
			},
			toLogin() {
				uni.navigateTo({
					url: 'pages/index/loginTel'
				})
			},
			closeAuthModal() {
				this.$store.dispatch('showAuthModal');
			},
			clickagree() {
				this.$u.toast('请同意用户协议');
			},
			// 第三方登录
			async thirdLogin(provider) {
				if (!this.protocol) {
					this.$u.toast('请同意用户协议');
					return false;
				}
				const that = this;
				let token = await wechat.login();
				if (token) {
					if (!token.check_state) {
						this.isweishenhe = true;
						return false
					}
					this.tokens = token.token;
					await this.$http_business('user.wxMiniProgramOauth_isbind', {
						token: token.token,
					}).then(res => {
						console.log(res)
						if (res.code === 1) {
							if (res.data.is_bind) {
								that.getUserInfo(token);
								that.closeAuthModal()
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									});
								}, 800)
							} else {
								this.bindmobille = true;
							}
						}
					});
				}
			},
			getPhoneNumber(e) {
				console.log('11', e)
				let res = e.detail;
				if (res.errMsg === "getPhoneNumber:ok") {
					uni.showLoading({
						title: "登录中..."
					});
					this.$http_business('user.wxMiniProgramOauth_bind', {
						session_key: uni.getStorageSync("session_key"),
						encryptedData: res.encryptedData,
						openid: uni.getStorageSync('open_id'),
						iv: res.iv,
						user_type: "2",
						token: this.tokens,
					}).then(res => {
						uni.hideLoading()
						console.log(res)
						if (res.code == 1) {
							uni.showToast({
								title: '登录成功'
							})
							// this.$store.commit('isLogin',true)
							// this.$store.commit('userInfo',res.data.userinfo)
							// uni.setStorageSync('userInfo',res.data.userinfo)
							this.getUserInfo(res.data.userinfo);
							setTimeout(() => {
								uni.navigateBack({})
							}, 1500)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})

						}
					});
				}
				return
			}
		}
	};
</script>

<style lang="scss">
	.container {
		height: 98vh;
	}

	.logo {
		width: 88px;
		height: 88px;
		border-radius: 0px 0px 0px 0px;
		opacity: 1;
	}

	.name {
		font-size: 18px;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #ffffff;
		line-height: 21px;
		margin-top: 34rpx;
		text-align: center;
	}

	.denglu {
		width: 344px;
		height: 44px;
		background: #4f83fd;
		border-radius: 4px 4px 4px 4px;
		opacity: 1;
		font-size: 16px;
		margin-top: 180rpx;
		color: #FFFFFF;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.title {
		font-size: 16px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 19px;
		margin-top: 40rpx;
		text-align: center;
	}

	.agreement-box {
		position: fixed;
		bottom: 70rpx;
		width: 100%;
		margin: 80rpx auto 0;

		.protocol-check {
			transform: scale(0.7);
		}

		.agreement-text {
			font-size: 26rpx;
			font-weight: 500;
			color: #999999;

			.tcp-text {
				color: #4f83fd;
			}
		}
	}

	.notice-modal {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 612 rpx;
		min-height: 658 rpx;
		background: #13114c;
		padding: 30 rpx;
		border-radius: 20 rpx;

		.seckill-btn {
			width: 98%;
			line-height: 70rpx;
			color: #fff;
			background-color: #f56c6c;
			border-color: #f56c6c;
			font-size: 28rpx;
			font-weight: 500;
			border-radius: 10rpx;
			padding: 0;
			margin-bottom: 30rpx;
			margin-top: 50rpx;
		}

		.auto-login-img {
			width: 120rpx;
			height: 120rpx;
			margin: 92rpx 30rpx 30rpx;
		}
	}

	.slot-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.audit_img {
			width: 160rpx;
			height: 160rpx;

			.audit_img_top {
				width: 100%;
				height: 100%;
			}
		}

		.audit_title {
			font-size: 36rpx;
			font-weight: bold;
			color: #ffffff;
			line-height: 48rpx;
			margin: 20rpx auto 20rpx;
		}

		.audit_sub_title {
			font-size: 32rpx;
			font-weight: 500;
			color: #999999;
			line-height: 48rpx;
			margin: 10rpx auto 10rpx;
		}
	}
</style>